<template>
	<view class="media-item"
		:style="{width: itemSize.width, height: itemSize.height, background: isImage?'#ececec':'#d9b8f1'}">
		<template v-if='isImage'>
			<image class="image" :src="showImageThumb ? getImageThumbUrl : mediaData.imageUrl" :mode="imageMode"
				@click="tapImage"></image>
		</template>
		<template v-else-if="isVideo">
			<template v-if='showVideoThumb'>
				<image class="image" :src='getVideoThumbUrl' :mode="imageMode" @click="tapVideo"></image>
				<image class="play" src='/static/c-image/play.png' mode="scaleToFill" @click="tapVideo"></image>
				<video class="video" id='video' :src="mediaData.imageUrl" :muted="true" :loop='false'
					@fullscreenchange='screenFullChange' @error='videoLoadError' @loadedmetadata="videoLoad"
					@play="playVideo" @pause="pauseVideo" @ended='endedVideo'></video>
			</template>
			<template v-else>
				<video class="image" id='video' :src='mediaData.imageUrl' :muted="true" :loop='false'
					@fullscreenchange='screenFullChange' @error='videoLoadError' @loadedmetadata="videoLoad"
					@play="playVideo" @pause="pauseVideo" @ended='endedVideo'></video>
			</template>
		</template>
		<view class="corner top-left">
			<slot name="topLeft">
			</slot>
		</view>
		<view class="corner top-right">
			<slot name="topRight">
			</slot>
		</view>
		<view class="corner bottom-left">
			<slot name="bottomLeft"></slot>
		</view>
		<view class="corner bottom-right">
			<slot name="bottomRight"></slot>
		</view>
		<view class="cover">
			<slot name='cover'></slot>
		</view>
	</view>
</template>

<script>
	import {
		ENUM_MEDIA_TYPE
	} from "../../static/enum.js";
	import ComponentMixin from "../../mixins/common-component-mixin.js";
	export default {
		name: "",
		mixins: [ComponentMixin],
		props: {
			mediaData: {
				type: Object,
				default: () => {}
			},
			itemSize: {
				type: Object,
				default: () => {}
			},
			imageMode: {
				type: String,
				default: "aspectFill"
			},
			showImageThumb: {
				type: Boolean,
				default: true
			},
			showVideoThumb: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				triggerFullScreen: false,
				videoContext: null,
			};
		},
		computed: {
			isImage: function() {
				return this.mediaData.imageType === ENUM_MEDIA_TYPE.IMAGE.value
			},
			isVideo: function() {
				return this.mediaData.imageType === ENUM_MEDIA_TYPE.VIDEO.value
			},
			getVideoThumbUrl: function() {
				if (this.mediaData.thumbUrl) return this.mediaData.thumbUrl;
				if (this.mediaData.imageUrl.indexOf('?x-oss-process') != -1) return this.mediaData.imageUrl;
				return `${this.mediaData.imageUrl}?x-oss-process=video/snapshot,t_0,f_jpg`;
			},
			getImageThumbUrl: function() {
				if (this.mediaData.thumbUrl) return this.mediaData.thumbUrl;
				if (this.mediaData.imageUrl.indexOf('?x-oss-process') != -1) return this.mediaData.imageUrl;
				return `${this.mediaData.imageUrl}?x-oss-process=image/resize,p_50,m_fill,w_100`;
			},
		},
		watch: {

		},
		mounted() {},
		destroyed() {},
		methods: {
			tapDelete() {
				this.$emit("tapDelete", this.mediaData)
			},
			tapDownload() {
				this.$emit("tapDownload", this.mediaData)
			},
			tapImage() {
				this.$emit("tapImage", this.mediaData.imageUrl)
			},
			tapVideo() {
				this.$emit("tapVideo", this.mediaData.imageUrl)
			},
			previewImage(urls, current) {
				uni.previewImage({
					urls,
					current
				})
			},
			initVideoContext() {
				if (!this.videoContext) {
					this.videoContext = uni.createVideoContext("video", this);
				}
			},
			triggerPlayVideo() {
				this.initVideoContext();
				this.videoContext.play();
			},
			triggerPauseVideo() {
				this.initVideoContext();
				this.videoContext.pause();
			},
			previewVideo() {
				this.initVideoContext();
				this.videoContext.requestFullScreen();
				this.$nextTick(() => {
					this.triggerPlayVideo();
				})
			},
			screenFullChange(e) {
				if (e.detail.fullScreen != this.triggerFullScreen) {
					this.triggerFullScreen = e.detail.fullScreen;
					if (!e.detail.fullScreen) {
						this.initVideoContext();
						this.triggerPauseVideo();
					}
				}
			},
			videoLoadError(e) {
				// console.log('videoLoadError', e);
			},
			videoLoad(e) {
				// console.log('videoLoad', e);
			},
			playVideo(e) {
				// console.log('playVideo', e);
			},
			pauseVideo(e) {
				// console.log('pauseVideo', e);
			},
			endedVideo(e) {
				// console.log('endedVideo', e);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.media-item {
		width: 100%;
		height: 100%;
		position: relative;
		background: #ececec;

		.cover {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 10;
			background: transparent;
			pointer-events: none;
		}


		.corner {
			position: absolute;
			display: flex;
			flex-direction: column;
			background: transparent;
			z-index: 9;
		}

		.top-left {
			top: 0;
			left: 0;
			align-items: flex-start;
			justify-content: flex-start;
		}

		.top-right {
			top: 0;
			right: 0;
			align-items: flex-end;
			justify-content: flex-start;
		}

		.bottom-left {
			bottom: 0;
			left: 0;
			align-items: flex-start;
			justify-content: flex-end;
		}

		.bottom-right {
			bottom: 0;
			right: 0;
			align-items: flex-end;
			justify-content: flex-end;
		}

		.image {
			width: 100%;
			height: 100%;
			z-index: 0;
		}

		.play {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 60rpx;
			height: 60rpx;
			z-index: 1;
		}

		.video {
			position: fixed;
			top: -99999rpx;
			left: -99999rpx;
		}
	}
</style>